<!-- <h1>{{ question.question_text }}</h1>

<ul>
{% for choice in question.choice_set.all %}
    <li>{{ choice.choice_text }} -- {{ choice.votes }} vote{{ choice.votes|pluralize }}</li>
{% endfor %}
</ul>

<a href="{% url 'polls:detail' question.id %}">Vote again?</a> -->




<!-- <h1 style="text-align: center; font-family: Arial, sans-serif; color: #2c3e50; margin-top: 30px;">
    {{ question.question_text }}
</h1>

<div style="max-width: 600px; margin: 20px auto; font-family: Arial, sans-serif;">
    <ul style="list-style: none; padding: 0; margin-bottom: 30px;">
    {% for choice in question.choice_set.all %}
        <li style="margin-bottom: 10px; background: white; border-radius: 4px; overflow: hidden; box-shadow: 0 2px 3px rgba(0,0,0,0.1);">
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 12px 15px;">
                <span>{{ choice.choice_text }}</span>
                <div style="display: flex; align-items: center;">
                    <span style="font-weight: bold; margin-right: 15px; color: #2c3e50;">{{ choice.votes }} 票</span>
                    <div style="width: 60px; height: 8px; background: #ecf0f1; border-radius: 4px; overflow: hidden;">
                        <div style="height: 100%; width: {% widthratio choice.votes question.total_votes 100 %}%; background: #3498db;"></div>
                    </div>
                </div>
            </div>
        </li>
    {% endfor %}
    </ul>

    <div style="text-align: center; margin: 30px 0; padding: 15px; background: #f8f9fa; border-radius: 8px;">
        <p style="margin: 0; font-size: 1.1em;">
            总投票数: <strong style="color: #27ae60;">{{ question.total_votes }}</strong>
        </p>
    </div>

    <div style="text-align: center; margin-top: 30px;">
        <a href="{% url 'polls:detail' question.id %}" 
           style="display: inline-block; padding: 10px 20px; background: #3498db; color: white; text-decoration: none; border-radius: 4px; margin-right: 10px;">
            再次投票
        </a>
        <a href="{% url 'polls:index' %}" 
           style="display: inline-block; padding: 10px 20px; background: #f8f9fa; color: #333; text-decoration: none; border-radius: 4px;">
            返回列表
        </a>
    </div>
</div> -->
<div style="font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px;">
    <div style="text-align: center; margin-bottom: 40px;">
        <h1 style="color: #2c3e50; margin: 0 0 10px 0; font-weight: 600; font-size: 2rem; position: relative; display: inline-block;">
            <!-- <span style="display: inline-block; padding: 0 15px; background: linear-gradient(120deg, #3498db, #2ecc71); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative;"> -->
                投票结果
                <span style="position: absolute; bottom: -8px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #3498db, #2ecc71); border-radius: 3px;"></span>
            </span>
        </h1>
        <p style="color: #7f8c8d; margin: 0; font-size: 1.1rem;">{{ question.question_text }}</p>
    </div>

    <div style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); padding: 30px; margin-bottom: 30px;">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 30px;">
            <div>
                <h3 style="color: #2c3e50; margin: 0 0 20px 0; font-weight: 600; font-size: 1.2rem; display: flex; align-items: center;">
                    <svg style="width: 20px; height: 20px; fill: #3498db; margin-right: 10px;" viewBox="0 0 24 24">
                        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM7 10h2v7H7zm4-3h2v10h-2zm4 6h2v4h-2z"/>
                    </svg>
                    投票统计
                </h3>
                <ul style="list-style: none; padding: 0; margin: 0;">
                    {% for choice in question.choice_set.all %}
                    <li style="margin-bottom: 15px;">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
                            <span style="font-weight: 500; color: #2c3e50;">{{ choice.choice_text }}</span>
                            <span style="font-weight: 600; color: #3498db;">{{ choice.votes }} 票 ({% widthratio choice.votes question.total_votes 100 %}%)</span>
                        </div>
                        <div style="height: 8px; background: #ecf0f1; border-radius: 4px; overflow: hidden;">
                            <div style="height: 100%; width: {% widthratio choice.votes question.total_votes 100 %}%; background: linear-gradient(90deg, #3498db, #2ecc71);"></div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div>
                <h3 style="color: #2c3e50; margin: 0 0 20px 0; font-weight: 600; font-size: 1.2rem; display: flex; align-items: center;">
                    <svg style="width: 20px; height: 20px; fill: #2ecc71; margin-right: 10px;" viewBox="0 0 24 24">
                        <path d="M11 2v20c-5.07-.5-9-4.79-9-10s3.93-9.5 9-10zm2.03 0v8.99H22c-.47-4.74-4.24-8.52-8.97-8.99zm0 11.01V22c4.74-.47 8.5-4.25 8.97-8.99h-8.97z"/>
                    </svg>
                    数据可视化
                </h3>
                <div style="height: 250px; position: relative;">
                    <canvas id="resultsChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div style="background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); padding: 20px; margin-bottom: 30px; text-align: center;">
        <div style="display: inline-block; background: #f8f9fa; padding: 15px 25px; border-radius: 8px;">
            <span style="font-weight: 500; color: #7f8c8d; margin-right: 10px;">总投票数:</span>
            <span style="font-size: 1.5rem; font-weight: 700; color: #2ecc71;">{{ question.total_votes }}</span>
        </div>
    </div>

    <div style="display: flex; justify-content: center; gap: 15px;">
        <a href="{% url 'polls:detail' question.id %}" style="background: linear-gradient(135deg, #3498db, #2ecc71); color: white; text-decoration: none; padding: 12px 25px; border-radius: 8px; font-weight: 500; display: inline-flex; align-items: center; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);">
            <svg style="width: 18px; height: 18px; fill: white; margin-right: 8px;" viewBox="0 0 24 24">
                <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
            </svg>
            重新投票
        </a>
        <a href="{% url 'polls:index' %}" style="background: #f8f9fa; color: #7f8c8d; text-decoration: none; padding: 12px 25px; border-radius: 8px; font-weight: 500; display: inline-flex; align-items: center; transition: all 0.3s ease;">
            <svg style="width: 18px; height: 18px; fill: #7f8c8d; margin-right: 8px;" viewBox="0 0 24 24">
                <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
            </svg>
            返回列表
        </a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 绘制图表
const ctx = document.getElementById('resultsChart').getContext('2d');
const labels = [
    {% for choice in question.choice_set.all %}
        '{{ choice.choice_text|escapejs }}',
    {% endfor %}
];
const data = [
    {% for choice in question.choice_set.all %}
        {{ choice.votes }},
    {% endfor %}
];
const backgroundColors = [
    '#3498db', '#2ecc71', '#e74c3c', '#f39c12', 
    '#9b59b6', '#1abc9c', '#d35400'
];

new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: labels,
        datasets: [{
            data: data,
            backgroundColor: backgroundColors,
            borderWidth: 0,
            hoverOffset: 10
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'right',
                labels: {
                    boxWidth: 12,
                    padding: 20,
                    usePointStyle: true,
                    pointStyle: 'circle',
                    font: {
                        family: "'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
                        size: 12,
                        weight: 500
                    },
                    color: '#2c3e50'
                }
            },
            tooltip: {
                bodyFont: {
                    family: "'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
                    size: 13,
                    weight: 'normal'
                },
                titleFont: {
                    family: "'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
                    size: 13,
                    weight: 'bold'
                },
                padding: 10,
                backgroundColor: 'rgba(0, 0, 0, 0.8)',
                cornerRadius: 8
            }
        },
        cutout: '70%',
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
});
</script>
<!-- 添加到results.html、detail.html和index.html的底部 -->
<footer style="font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; background: #2c3e50; color: white; padding: 40px 20px; margin-top: 60px;">
    <div style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px;">
        <!-- 网站信息 -->
        <div>
            <h3 style="color: #ecf0f1; font-size: 1.5rem; margin-bottom: 20px; position: relative; display: inline-block;">
                <span style="position: absolute; bottom: -8px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #3498db, #2ecc71);"></span>
                投票系统
            </h3>
            <p style="color: #bdc3c7; line-height: 1.6; margin-bottom: 20px;">
                一个简洁高效的在线投票平台，帮助您快速收集用户意见。
            </p>
            <div style="display: flex; gap: 15px;">
                <a href="#" style="color: white; text-decoration: none;">
                    <svg style="width: 24px; height: 24px; fill: currentColor;" viewBox="0 0 24 24">
                        <path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/>
                    </svg>
                </a>
                <a href="#" style="color: white; text-decoration: none;">
                    <svg style="width: 24px; height: 24px; fill: currentColor;" viewBox="0 0 24 24">
                        <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
                    </svg>
                </a>
                <a href="#" style="color: white; text-decoration: none;">
                    <svg style="width: 24px; height: 24px; fill: currentColor;" viewBox="0 0 24 24">
                        <path d="M12 2.04c-5.5 0-10 4.49-10 10.02 0 5 3.66 9.15 8.44 9.9v-7H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.89 3.78-3.89 1.09 0 2.23.19 2.23.19v2.47h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.45 2.9h-2.33v7a10 10 0 0 0 8.44-9.9c0-5.53-4.5-10.02-10-10.02z"/>
                    </svg>
                </a>
            </div>
        </div>
 <!-- 快速链接 -->
      <div>
    <h3 style="color: #ecf0f1; font-size: 1.2rem; margin-bottom: 20px;">快速链接</h3>
    <ul style="list-style: none; padding: 0; margin: 0;">
        <li style="margin-bottom: 12px;">
            <a href="{% url 'polls:index' %}" style="color: #bdc3c7; text-decoration: none; transition: color 0.3s; display: flex; align-items: center;">
                <svg style="width: 16px; height: 16px; fill: #3498db; margin-right: 8px;" viewBox="0 0 24 24">
                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
                </svg>
                投票首页
            </a>
        </li>
        <li style="margin-bottom: 12px;">
            <a href="/admin/" style="color: #bdc3c7; text-decoration: none; transition: color 0.3s; display: flex; align-items: center;">
                <svg style="width: 16px; height: 16px; fill: #d35400; margin-right: 8px;" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/>
                </svg>
                管理员后台
            </a>
        </li>
        <li style="margin-bottom: 12px;">
            <a href="#" style="color: #bdc3c7; text-decoration: none; transition: color 0.3s; display: flex; align-items: center;">
                <svg style="width: 16px; height: 16px; fill: #2ecc71; margin-right: 8px;" viewBox="0 0 24 24">
                    <path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
                </svg>
                常见问题
            </a>
        </li>
        <li style="margin-bottom: 12px;">
            <a href="#" style="color: #bdc3c7; text-decoration: none; transition: color 0.3s; display: flex; align-items: center;">
                <svg style="width: 16px; height: 16px; fill: #e74c3c; margin-right: 8px;" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4.59-12.42L10 14.17l-2.59-2.58L6 13l4 4 8-8z"/>
                </svg>
                隐私政策
            </a>
        </li>
    </ul>
</div>
        <!-- 联系方式 -->
        <div>
            <h3 style="color: #ecf0f1; font-size: 1.2rem; margin-bottom: 20px;">联系我们</h3>
            <ul style="list-style: none; padding: 0; margin: 0;">
                <li style="margin-bottom: 12px; color: #bdc3c7; display: flex; align-items: center;">
                    <svg style="width: 16px; height: 16px; fill: #9b59b6; margin-right: 8px;" viewBox="0 0 24 24">
                        <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                    </svg>
                    contact@polls.com
                </li>
                <li style="margin-bottom: 12px; color: #bdc3c7; display: flex; align-items: center;">
                    <svg style="width: 16px; height: 16px; fill: #1abc9c; margin-right: 8px;" viewBox="0 0 24 24">
                        <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
                    </svg>
                    +86 138-XXXX-XXXX
                </li>
                <li style="margin-bottom: 12px; color: #bdc3c7; display: flex; align-items: center;">
                    <svg style="width: 16px; height: 16px; fill: #f39c12; margin-right: 8px;" viewBox="0 0 24 24">
                        <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                    </svg>
                    海南经贸职业技术学院
                </li>
            </ul>
        </div>
    </div>

    <!-- 版权信息 -->
    <div style="border-top: 1px solid rgba(255,255,255,0.1); margin-top: 40px; padding-top: 20px; text-align: center; color: #7f8c8d; font-size: 0.9rem;">
        <p style="margin: 0;">© 2025 投票系统. 保留所有权利</p>
    </div>
</footer>